<template>
	<view class="home">
		<!-- 首页轮播图 -->
		<swiper indicator-dots autoplay circular>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 展示今日课程 -->
		<view class="showClass">
			<view class="classWarn">
				上课提醒
			</view>
			<!-- <view class="uni-flex flex-item-V" v-for="(item,index) in course">
				<view v-for="(item2,index) in date">
					<view v-if="item2.rq == dateToday && item2.xqmc == item.xq">{{item.kcmc}}</view>
				</view>
			</view> -->
			<view class="uni-flex flex-item-V"  v-for="(item,index) in kcmc">
				<view class="">{{item.jcdm2}}节</view>
				<view>
					{{item.kcmc}}
					<view class="">{{item.jxcdmc}}</view>
				</view>
			</view>
			<!-- 当日没有课程时 -->
			<view class="noClass" v-if="kcmc.length == 0">今天没有课喔，去图书馆学习吧~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xnxqdm: 202002, // 当前学期
				zc: '', // 默认当前周
				course: [], //存储 返回每周课表数据
				date: [] ,//存储 后台返回每周对应的日期 
				dateToday: '', // 获取今天的日期
				swipers: [], //存储轮播图片
				kcmc: [], // 返回今日课程名称
				navs: [{
						icon: 'iconfont icon-course',
						title: '课程表',
						path: '/pages/course/course'
					},
					{
						icon: 'iconfont icon-5wodejifen',
						title: '成绩查询',
						path: '/pages/score/score'
					},
					{
						icon: 'iconfont icon-task',
						title: '上课任务',
						path: '/pages/task/task'
					},
					{
						icon: 'iconfont icon-star',
						title: '素拓分',
						path: '/pages/sutuofen/sutuofen'
					},
					{
						icon: 'iconfont icon-yixuan',
						title: '已选公选课',
						path: '/pages/GongXuanKe/GongXuanKe'
					},
					{
						icon: 'iconfont icon-jisuanqi',
						title: '体侧计算器',
						path: '/pages/TiCeCheck/TiCeCheck'
					},
					{
						icon:'iconfont icon-tongzhi',
						title: '通知',
						path: '/pages/TongZhi/TongZhi'
					},
					{
						icon: 'iconfont icon-fenxiang',
						title: '分享',
						path: '/pages/FengXiang/FengXiang'
					}
				]
			}
		},
		onLoad() {
			this.getSwipers(),
			this.getCurrentWeek()
		},
		methods: {
			async getSwipers() {
				const res = await this.$myRequest({
					url: '/api/getlunbo'
				})
				this.swipers = res.data.message
			},
			// 导航点击的处理函数
			navItemClick(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取本周上课数据
			async weekCourse() {
				const res = await this.$schoolRequest({
					url:'/xsgrkbcx!getKbRq.action',
					method:'GET',
					data: {
						xnxqdm: this.xnxqdm,
						zc: this.zc
					},
					header: {
						// 'content-type':''
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync("sessionid"),
					},
					success: (res) => {
						this.course = res.data[0]
						this.date = res.data[1]
						this.todayCourse()
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 展示今日上课数据
			todayCourse(){
				//console.log(this.dateToday)
				for(let i=0;i<this.date.length;i++){
					if(this.date[i].rq == this.dateToday){
						for(let j=0;j<this.course.length;j++){
							if(this.course[j].xq == this.date[i].xqmc){
								let newKcmc = this.course[j]
								this.kcmc = this.kcmc.concat(newKcmc)
								console.log(this.kcmc)
							}
						}
					}
				}
			},
			// 获取当前周值
			getCurrentWeek() {
				var date1 = "2021-02-28";
				var date2 = new Date().toISOString().slice(0,10);
				this.dateToday = date2 //赋值今天日期
				
				var time1 = Date.parse(date1);
				var time2 = Date.parse(date2);
				
				var daycount = (Math.abs(time2-time1))/1000/60/60/24;
				var currentweek = Math.floor((daycount/7)+1);
				this.zc = currentweek
				
				this.weekCourse()
			},
		}
	}
</script>

<style lang="scss">
	.home {
		swiper {
			width: 750rpx;
			height: 350rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.nav {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			//justify-content: space-between;
			.nav_item {
				width: 25%;
				text-align: center;

				view {
					width: 100rpx;
					height: 100rpx;
					background: $bkg-color;
					border-radius: 60rpx;
					margin: 10px auto 2px;
					line-height: 100rpx;
					color: #fff;
					font-size: 50rpx;
				}

				text {
					font-size: 30rpx;
				}
			}
		}
		.showClass{
			.uni-flex{
				display: flex;
				flex-direction: row;
			}
			.flex-item-V {
				width: 90%;
				height: auto;
				margin: 10px auto;
				border: 1px solid $uni-bg-color-mask;
				border-radius: 10px;
			}
			.classWarn{
				margin-top:30rpx;
			}
			.noClass{
				margin-top:30rpx;
			}
		}
	}
</style>
